<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="./css_4.6.1/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="./css_3.4.1/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>关于我</title>
		<style>
			@font-face {
				font-family: 'Open Sans';
				font-style: normal;
				font-weight: 300;
				src: local('Open Sans Light'),
					local('OpenSans-Light'),
					url(../fonts/oopensans-webfont.woff) format('woff')
			}

			@font-face {
				font-family: 'Open Sans';
				font-style: normal;
				font-weight: 600;
				src: local('Open Sans Semibold'),
					local('OpenSans-Semibold'),
					url(./font/opensans-webfont.woff) format('woff')
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", SimSun, "Microsoft YaHei", sans-serif;
				font-weight: 300;
				color: #333
			}

			body {
				font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
				font-weight: 300;
				color: #5c5c5c
			}


			body {
				background-color: #DADFE1;
				font-family: 'open_sansregular';
			}

			.header-title {
				border-bottom: 1px solid #c7ced1;
				padding-bottom: 24px;
				margin-bottom: 24px;
				display: table;
				margin-right: auto;
			}


			.header-about {
				color: #5C6A70;
				font-size: 14px;
				margin-bottom: 24px;
			}

			.header-navItem {
				font-size: 12px;
				color: #374043;
				letter-spacing: 2px;
				clear: both;
			}

			.nav-link {
				color: #5c6a70;
				letter-spacing: 2px;
				width: auto;
			}

			.nav-link:hover {
				color: #252b2d;
			}

			.post-inner {
				box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 35px;
				padding-top: 45px;
				padding-bottom: 45px;
				padding-left: 56px;
				padding-right: 56px;
				background-color: white;
				margin-top: 10px;
			}

			.post-body {
				background-color: white;
				padding: 56px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}

			.post-body-title {
				margin-top: 0;
			}

			.tup {
				background-image: url(img/llq.png);
				background-size: cover;
				background-position: 50%;
				height: 300px;
			}

			.post-body-content {
				font-size: 17px;
				color: #5c5c5c;
				padding-bottom: 56px;
				border-bottom: 1px solid #dce4e6;
				margin-top: 30px;
			}

			@media (min-width:1200px) {
				#zhuti {
					padding-top: 100px;
				}

				#min-header {
					display: none;
				}

				#header {
					display: block;
				}

				picture {
					margin-top: -2.5%;
				}

			}

			@media (max-width:1199px) {

				#min-header {
					display: block;
				}

				#header {
					display: none;
				}

				.header-title {
					margin-left: auto;
				}

				.header-about {
					text-align: center;
				}
			}

			@media (max-width:991px) {
				picture {
					margin-top: -2.8%;
				}
			}

			@media (max-width:767px) {
				picture {
					margin-top: -3.8%;
				}
			}

			.minNav {
				display: table;
				margin-left: auto;
				margin-right: auto;
				border-top: 1px solid #c7ced1;
				padding-top: 15px;
			}

			ul {
				color: #333333;
			}

			h3 {
				margin-top: 36px;
				margin-bottom: 24px;
			}

			.jjp {
				color: #5c5c5c;
				font-size: 17px;
			}

			li {
				color: #333333;
				font-size: 17px;
			}
			#header-title{
				color: #414344;
				text-decoration: none;
			}
			#header-title:hover{
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="zhuti" class="row">

				<!-- header -->
				<div id="header" class="col-xl-3 col-lg-12">
					<h1 class="header-title">
						<a id="header-title" href="个人博客.html">GanKun</a>
					</h1>
					<p class="header-about">Let life be beautiful like summer flowers and death like autumn leaves.</p>
					<ul id="nav" class="nav flex-column"
						style="display: table;border-top: 1px solid #c7ced1;padding-top: 24px;">
						<a class="nav-link" style="padding-left: 0;" href="极简导航.html" target="_blank">Home</a>
						<a class="nav-link" style="padding-left: 0;" href="作品库.html">Works</a>
						<a class="nav-link" style="padding-left: 0;" href="关于我.html">About</a>
					</ul>
				</div>

				<!-- min-header -->
				<div id="min-header" class="col-xl-3 col-lg-12">
					<h1 class="header-title">
						<a id="header-title" href="个人博客.html">GanKun</a>
					</h1>
					<p class="header-about">Let life be beautiful like summer flowers and death like autumn leaves.</p>
					<ul class="nav minNav">
						<div class="row">
							<div class="col-4">
								<a class="nav-link" style="padding-left: 0;" href="极简导航.html" target="_blank">Home</a>
							</div>
							<div class="col-4">
								<a class="nav-link" style="padding-left: 0;" href="作品库.html">Works</a>
							</div>
							<div class="col-4"><a class="nav-link" style="padding-left: 0;" href="关于我.html">About</a>
							</div>
						</div>
					</ul>
				</div>

				<!-- main -->
				<div class="col-xl-9  post-inner">
					<h1>关于我</h1>

					<h3>简介</h3>

					<p class="jjp">零三年生，普普通通，没有特别成就，一个永远在路上的普通人。</p>

					<h3>联系我</h3>
					<ul>
						<li>Telegram: @GanKun </li>
						<li>Email: 1747737376@qq.com </li>
						<li>Location: JingDeZhen, China </li>
						<li>Phone: +86 182-7098-4927 </li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
